<template>
   <div class="box">
        
      <el-card class="box-card">
         <div slot="header" class="">
            <span style="display: flex; justify-content: center;">{{addOrEdit}}</span>
            
         </div>
         <el-form ref="form" :inline="true" :rules="rules" :model="form" label-width="120px">

             <el-form-item label="姓名：" prop="name">
               <el-input v-model="form.name"></el-input>
             </el-form-item>
             <el-form-item label="登录权限：" prop="admin">
               <el-select v-model="form.admin">
                  <el-option v-for="(item,index) in adminList" :key="index" :label="item.label" :value="item.label"></el-option>
               </el-select>
             </el-form-item>
             <el-form-item label="手机号：" prop="phone">
                 <el-input v-model="form.phone"></el-input>
             </el-form-item>
             <el-form-item label="工作内容：" prop="work">
                 <el-input v-model="form.work"></el-input>
             </el-form-item>
             <el-form-item label="身份证：" prop="idcard">
                 <el-input v-model="form.idcard"></el-input>
             </el-form-item>
             <el-form-item label="家庭地址" prop="address">
                 <el-input v-model="form.address"></el-input>
             </el-form-item>
            <el-form-item v-if="isShow" label="任职情况：">
               <el-button type="text" @click="tranExist">{{exist}}</el-button>
             </el-form-item>
             <div style="display: flex; justify-content: center;">
               <el-form-item>
              <el-button type="primary" round @click="submitForm(form)">{{submitAddOrEdit}}</el-button>
            </el-form-item>
             </div>
            
         </el-form>
      </el-card>
   </div>
  
</template>

<script>

import Cookie from 'js-cookie';
import { add, update } from '@/api/employee';
import common from '@/assets/common'
import validate from '@/utils/validate';

export default {
   name:'',
   components: {  },
   data() {
      return {
       form:{
           name:'',
           admin:'',
           phone:'',
           work:'',
           idcard:'',
           address:'',
          
         },
         exist:'在职',
         submitAddOrEdit:'确认添加',
         addOrEdit:'添加',
         isShow:false
      }
   },
   computed:{
      rules(){
         return{
            name:[
               {'required': true, 'message': '姓名不能为空', 'trigger': 'blur'}
            ],
            admin:[
               {'required': true, 'message': '登录权限不能为空', 'trigger': 'blur'}
            ],
            phone:[
               {'required': true, validator:validate.checkPhone, 'trigger': 'blur'}
            ],
            work:[
               {'required': true, 'message': '工作内容不能为空', 'trigger': 'blur'}
            ],
            idcard:[
               {required: true, validator:validate.validID, 'trigger': 'blur'}
            ],
            address:[
               {'required': true, 'message': '房间位置不能为空', 'trigger': 'blur'}
            ],
         }
      },
      
      adminList(){
         return [{value:'1',label:'有权限'},{value:'0',label:'没权限'}]
      }
   },

   methods:{
      submitForm(){
         this.$refs.form.validate(valid =>{
            if(valid){
               if(Cookie.get('modalType')==0){//添加
                  this.form.admin = common.newArr(this.adminList).indexOf(this.form.admin)
                  add(this.form).then(res =>{
                     // console.log('很要命',res);
                     let {data,msg,code} = res.data
                     if(code === 1){
                        this.$message.success(data)
                        this.goBack()
                     }else{
                        this.$message.error(msg)
                     }
                  }).catch(err =>{
                     this.$message.error('后端出现未知错误：',err)
                  })
               }else{//修改
                  let params = this.form
                  params.exist = this.exist
                  params.admin = common.newArr(this.adminList).indexOf(this.form.admin)
                  update(params).then(res =>{
                     let {data,msg,code} = res.data
                     if(code === 1){
                        this.$message.success(data)
                        this.goBack()
                     }else{
                        this.$message.error(msg)
                     }
                  }).catch(err =>{
                     this.$message.error('后端出现未知错误：',err)
                  })
               }
            }
         })
      },
      goBack(){
            this.$router.push({name:'AdminEmp'})
      },
      tranExist(){
         this.$confirm('此操作将把员工的任职情况更改, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
         if(this.exist == '在职'){
            this.exist = '离职'
         }else
         {this.exist = '在职'}
      }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消更改任职情况'
            });
          });
         
      },
   },
   mounted(){
      if(Cookie.get('modalType') == 1){
         this.form = JSON.parse(Cookie.get('row'))
         this.isShow = true
         console.log('很要命---修改----',this.form);
         this.addOrEdit = '修改'
         this.submitAddOrEdit = '确认修改'
         console.log('很要命---admin----',this.form.admin);
         this.form.admin = common.newArr(this.adminList)[this.form.admin]
      }
      
      
   },
}
</script>

<style lang="less" scoped>
 .box{
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content:center;
    align-items:center;
    .box-card {
        width: 800px;
        margin-top: -89px;
    }

   }

</style>